<template>
    <div id="temp1">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for='(item,index) in list'>
                <a href="javascript:;" class="infos">
                    <mt-switch v-model="value[index]"></mt-switch>
                    <img id="imgs" class="mui-media-object mui-pull-left" :src="item.thumb_path">
                    <div class="mui-media-body">
                        <h4>{{item.title}}</h4>
                        <p class="mui-ellipsis">
                            <span>￥：{{item.sell_price}}</span>
                            <carnumber :gid=item.id :gnum=item.cou @send='jieshou'></carnumber>
                            <span class="del" >删除</span>
                        </p>
                    </div>
                </a>
            </li>

        </ul>
        <div class="total">
            <div class="left">
                <h4>总计(不含运费)</h4>
                <p>
                    <span>总计商品{{totalcount}}件</span>
                    <span>总计金额{{totalnum}}元</span>
                </p>
            </div>
            <mt-button class="right" size="small" type="danger">结算</mt-button>
        </div>
        {{value}}
    </div>
</template>
<script>
    import { Switch } from 'mint-ui';
    import common from '../../common.js'
    import carnumber from '../subcom/carnumber.vue'
    import { dataobj,updateloca } from '../../localstro.js'
    export default {
        data() {
            return {
                shopingcarnum:0,     //购物车徽章数量的实际值
                list: [
                    /* {
                        "cou": 1,
                        "id": 88,
                        "title": "苹果Apple iPhone 6 Plus 16G 4G手机（联通三网版）",
                        "sell_price": 5780,
                        "thumb_path": "http://vue.studyit.io/upload/201504/20/thumb_201504200059022920.jpg"
                    },
                    {
                        "cou": 1,
                        "id": 89,
                        "title": "小米（Mi）小米Note 16G双网通版",
                        "sell_price": 2199,
                        "thumb_path": "http://vue.studyit.io/upload/201504/20/thumb_201504200119262837.jpg"
                    } */
                ],
                value: [],
                totalnum:0,
            }
        },
        computed:{
            totalcount(){
                var truearr = this.value.filter(function(item){return item});//选出true的项
                var amount =0; //总价格
                var that = this;

                this.value.forEach(function(item,index){
                    if(item){
                        //value的索引和list的索引相对应
                    var count = that.list[index].cou;  //对应商品的数量
                    var price = that.list[index].sell_price;
                    var itemamount = count*price;
                    amount += itemamount;
                    }
                 })
                this.totalnum = amount;
                return truearr.length; //返回什么调用处就是什么,也就是勾选的选中项
            }
        },
        components: {
            carnumber,
        },
        created() {
            this.getids();
        },
        methods: {
            jieshou(input){  //接收carnumber传过来的id和类型，更新localstroage中的数据
                //console.log(input);
                updateloca(input);      //调用localstro中的方法实现数据更新
                this.getids();
            },
            getids() {
                var ids = dataobj();
                var url = ""
                for (var k in ids) {
                    url += ',' + k;
                }
                url = common.temurl + '/api/goods/getshopcarlist/' + url.slice(1, url.length)
                this.$http.get(url).then(function (res) {
                    res.body.message.forEach(function (el) {
                        for (var k in ids) {
                            if (k == el.id) {
                                el.cou = ids[k]
                            }
                        }
                    });
                    this.list = res.body.message;   //将res中cou赋成对应id的正式数量
                    //console.log(this.list)
                })

            }
        }
    };
</script>
<style scoped>
    .mui-ellipsis {
        margin-top: 10px;
    }

    #temnum {
        display: inline-block;
        margin-left: 15px;
    }

    .del {
        margin-left: 30px;
    }

    .mui-table-view .mui-media-object {
        line-height: 42px;
        max-width: 80px;
        height: 80px;
        margin: 0 0 0 -10px;
    }

    .mui-table-view .mui-media-body {
        margin-top: 15px;
    }

    .mint-switch {
        position: relative;
        float: left;
        margin: 23px 10px 0 -10px;
    }

    .left {
        float: left;
        margin-top: 20px;
    }

    .right {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
    }

    .total {
        overflow: hidden;
        background-color: #eee;
        padding: 10px;
    }
</style>